<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合变形</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: #000;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            margin: 50px auto;
            width: 500px;
            list-style: none;
        }

        .box li {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            transition: all .5s;
            /* background-color: pink; */
            /* border: 1px solid #000; */
        }

        .box li:hover {
            transform: scale(1.3);
        }

        .box li img {
            width: 100%;
        }
    </style>
</head>

<body>
    <ul class="box">
        <script>
            const datas = [
                { name: "司马懿", imgSrc: "01.jpg" },
                { name: "女娲", imgSrc: "02.jpg" },
                { name: "百里守约", imgSrc: "03.jpg" },
                { name: "亚瑟", imgSrc: "04.jpg" },
                { name: "虞姬", imgSrc: "05.jpg" },
                { name: "张良", imgSrc: "06.jpg" },
                { name: "安其拉", imgSrc: "07.jpg" },
                { name: "李白", imgSrc: "08.jpg" },
                { name: "阿珂", imgSrc: "09.jpg" },
                { name: "墨子", imgSrc: "10.jpg" },
                { name: "鲁班", imgSrc: "11.jpg" },
                { name: "嬴政", imgSrc: "12.jpg" },
                { name: "孙膑", imgSrc: "13.jpg" },
                { name: "周瑜", imgSrc: "14.jpg" },
                { name: "老夫子", imgSrc: "15.jpg" },
                { name: "狄仁杰", imgSrc: "16.jpg" },
                { name: "扁鹊", imgSrc: "17.jpg" },
                { name: "马可波罗", imgSrc: "18.jpg" },
                { name: "XXX", imgSrc: "19.jpg" },
                { name: "齐天大圣", imgSrc: "20.jpg" },
            ]
            let str = ''
            for (i = 0; i < 20; i++) {
                str += (`
                <li><img src="./uploads/${datas[i]['imgSrc']}" alt="" title="${datas[i]['name']}"></li>
                `)
            }
            document.write(str)
        </script>
    </ul>
</body>

</html>